<template>
	<view class="pageBg">
		<canvas class="qrcode" canvas-id="qrcode" id="qrcode"></canvas>
		<view class="canvasBox">
			
			<img
			 crossOrigin="Annoymous" @load="imageLoad()"  @error="error"  id="userPic" class="userPic img" ref="userPic" :src="detailItem.img+'?v='+time()" mode="aspectFill"></img>
			<uqrcode ref="uqrcode" class="uqrcode" canvas-id="qrcode" :value="network + pageUrl" :options="{ margin: 10 }"></uqrcode>
		</view>
		<view class="opt">
			<view class="btn back" @click="back">取消</view>
			<view class="btn down" @click="down">保存图片</view>
		</view>
	</view>
</template>

<script>

import { canvasRadius, roundedImage, handleDrawText,downloadBase64 } from '@/utils/canvas.js';

const canvasW = 630;
const canvasH = 700;

export default {
	data() {
		return {
			src: '',
			proportion: 1, //比例
			userItem: {},
			goods: {},
			canvas: '',
			pageUrl: '',
			imageLoadIndex: 0,
			detailItem: {}
		};
	},
	
	watch: {
		// 监听图片加载完成
		async imageLoadIndex(newVal) {
			if (newVal === 1) {
				const src = await this.QRCodeInit();
				const win = await uni.getWindowInfo();
				this.proportion = 750 / win.windowWidth;
				const ctx = uni.createCanvasContext('qrcode');
				this.canvas = ctx;
				this.painting(ctx, 750 / win.windowWidth, src);
				
			}
		}
	},
	async onLoad({ page }) {
		uni.showLoading({
			title: '海报生成中'
		});
		this.pageUrl = page;
		this.detailItem = uni.getStorageSync('groupDetails');
	},
	mounted() {
		
		// this.init();
	},
	methods: {
		time(){
			return new Date()
		},
		error(fail){
			 console.log(fail)
		},
		imageLoad() {
			++this.imageLoadIndex;
		},
		// 海报
		async painting(ctx, m = 1, qrSrc) {
			// 背景
			const grd = ctx.createLinearGradient(0, 0, canvasW / m, canvasH / m);
			grd.addColorStop(0, '#F29F7A');
			grd.addColorStop(1, '#F00219');
			ctx.setFillStyle(grd);
			canvasRadius(ctx, 0, 0, canvasW / m, canvasH / m, 20 / m, grd);
			// 默认
			ctx.font = '14px "Source Han Sans CN-Regular"';
			ctx.setFontSize(14);
			ctx.setTextBaseline('top');
			// 创四方人脉圈
			ctx.setFontSize(40/m);
			ctx.setFillStyle('#000000');
			ctx.fillText('创四方人脉圈', 215 / m, 50 / m);
			//  白底矩形
			ctx.setFillStyle(grd);
			canvasRadius(ctx, 30/m, 140/m, 570 / m, 522 / m, 20 / m, '#F5F5F5');
			
			// 用户头像
			ctx.save();
			ctx.beginPath();
			ctx.arc(120 / m, 224 / m, 60 / m, 0, 2 * Math.PI);
			ctx.clip();
			ctx.drawImage(this.$refs.userPic.src, 60 / m, 164 / m, 120 / m, 120 / m);
			ctx.restore();
			// 用户名
			ctx.setFontSize(28/m);
			ctx.setFillStyle('#000000');
			ctx.fillText(this.detailItem.user_name, 217 / m, 187 / m);
			// //副标题
			ctx.setFillStyle('#F00219');
			ctx.setFontSize(12);
			ctx.fillText(this.detailItem.job, 217 / m, 235 / m);
			ctx.font ='italic bold '+(28/m)+'px cursive';
			handleDrawText(ctx, this.detailItem.advantage, 507 / m, 28 / m, 62 / m, 325 / m, 0, 30 / m);
			// 分割线
			ctx.save();
			ctx.beginPath();
			ctx.setLineWidth(2/m)
			ctx.moveTo(60/m, 441/m)
			ctx.lineTo(570/m, 441/m)
			ctx.setStrokeStyle("#DDDDDD")
			ctx.stroke()
			// 二维码
			ctx.drawImage(qrSrc.tempFilePath, 57 / m, 463 / m, 170 / m, 170 / m);
			
			handleDrawText(ctx, '扫码查看“名片”及“宣传手册”', 200 / m, 24 / m, 279 / m, 470 / m, 0, 26 / m);
			
			ctx.draw();
			uni.hideLoading()
		},
		// 下载
		down(src) {
			uni.canvasToTempFilePath({
				x: 0,
				y: 0,
				width: canvasW / this.proportion,
				height: canvasH / this.proportion,
				destWidth:3* canvasW / this.proportion,
				destHeight:3* canvasH / this.proportion,
				canvasId: 'qrcode',
				success: (res) => {
					downloadBase64(res.tempFilePath, this.detailItem.user_name+ '.png');
				},
				fail: (err) => {
					console.log(err, 'err');
				}
			});
		},
		// 二维码初始化
		async QRCodeInit() {
			return new Promise((reslove, reject) => {
				this.$refs.uqrcode.toTempFilePath({
					success: (res) => {
						reslove(res);
					}
				});
			});
		},

		async init() {
			const res = await this.$api.CardBusinessMi();
			this.userItem = res.data;
		},
		/*下载指定的图片 */
		downPic(url) {
			return new Promise((resolve) => {
				// load.start("加载中..");
				uni.downloadFile({
					url: url, //仅为示例，并非真实的资源
					success: (res) => {
						resolve(res.tempFilePath);
					},
					complete() {
						// load.hide(300);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pageBg {
	overflow: hidden;
	.img {
	}
	.canvasBox {
		width: 0;
		height: 0;
		position: fixed;
		right: 100vw;
		top: 100vh;
	}

	.qrcode {
		width: 630rpx;
		height: 700rpx;
		margin: 45rpx auto;
		overflow: hidden;
		position: relative;
	}

	.uqrcode {
		width: 1400px;
		height: 3000px;
		right: 100vw;
	}

	.opt {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 140rpx;
		left: 0;
		display: flex;
		justify-content: space-evenly;
		background-color: #fff;
		align-items: center;

		.btn {
			width: 300rpx;
			height: 80rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 0.9;
			border: 2rpx solid $price-color;
			line-height: 80rpx;
			font-size: $uni-font-size-15;
			text-align: center;
			color: $price-color;
		}

		.down {
			background-color: $price-color;
			color: $txt-color;
		}
	}
}
</style>
